<template>
  <div>
    <div id="cornerComment" v-if="detailVisible">
      <div class="cornerComment-in">
        <div class="cornerComment-in-title">
          <span>编辑命令</span>
          <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
        </div>
        <div class="commentBody">
          <el-button size="small" type="primary" @click="showRulevisible=true">新增命令</el-button>
          <el-table :data="rulesList">
            <el-table-column label="执行命令" prop="command">
              <template slot-scope="scope">
                {{ JSON.stringify(scope.row) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" prop="roleSort" width="100" align="center">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" plain @click="handleDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="cornerComment-in-footer">
          <el-button size="small" @click="closePOpup">取消</el-button>
          <el-button size="small" type="primary" @click="savefromFn">保存</el-button>
        </div>
      </div>
    </div>
    <commandBox :visible.sync="showRulevisible" @getRule="getRule"></commandBox>
  </div>
</template>

<script>
import {categorycommandlist, categorycommand, updateCategorycommand, devicecommandlist, updateDevicecommand, devicecommand} from "@/api/system/command"
import commandBox from '@/components/command'

export default {
  props: ['visible', 'commandRow', 'cateId', 'typeLink'],
  name: "deviceDetail",
  components: {commandBox},
  data() {
    return {
      detailVisible: false,
      rulesList: [],
      showRulevisible: false,
      commandIndex: 0,
      editId: 0
    }
  },
  watch: {
    visible() {
      this.detailVisible = this.visible
      if (!this.visible) {
        this.rulesList = []
        this.editId = 0
      } else {
        console.log('optionData:', this.commandRow, this.typeLink)
        if(this.typeLink==='device'){
          devicecommandlist({deviceId: this.cateId}).then(res => {
            for(let item of res.rows){
              if(this.commandRow.key === item.value){
                this.rulesList = JSON.parse(item.command)
                this.editId = item.id
              }
            }
          })
        }else{
          categorycommandlist({cateId: this.cateId}).then(res => {
            console.log('类目id：', res)
            for(let item of res.rows){
              if(this.commandRow.key === item.value){
                this.rulesList = JSON.parse(item.command)
                this.editId = item.id
              }
            }
          })
        }
      }
    }
  },
  methods: {
    chooseRule(row) {
      this.$emit('getRule', row)
      this.closePOpup()
    },
    savefromFn(){
      let data_ = {
        sku: this.commandRow.sku,  //  属性名
        value: this.commandRow.key, // 属性值
        command: JSON.stringify(this.rulesList),  // 命令
      }
      if(this.editId){
        data_.id = this.editId
        if(this.typeLink==='device'){
          data_.deviceId = this.cateId
          updateDevicecommand(data_).then(res=>{
            this.$message.success(res.msg)
            this.closePOpup()
          })
        }else{
          data_.cateId = this.cateId
          updateCategorycommand(data_).then(res=>{
            this.$message.success(res.msg)
            this.closePOpup()
          })
        }
      }else{
        if(this.typeLink==='device'){
          data_.deviceId = this.cateId
          devicecommand(data_).then(res=>{
            this.$message.success(res.msg)
            this.closePOpup()
          })
        }else{
          data_.cateId = this.cateId
          categorycommand(data_).then(res=>{
            this.$message.success(res.msg)
            this.closePOpup()
          })
        }
      }
    },
    closePOpup() {
      this.$emit('update:visible', false)
    },
    showRuleFn(index) {
      this.commandIndex = index
      this.showRulevisible = true
    },
    /** delete按钮操作 */
    handleDelete(index) {
      this.rulesList.splice(index,1)
      // this.$modal.confirm('是否确认delete规则编号为"' + row.id + '"的数据项？').then(function () {
      //   return delRules(row.id);
      // }).then(() => {
      //   this.getList();
      //   this.$modal.msgSuccess("delete成功");
      // }).catch(() => {
      // });
    },
    getRule(option) {
      this.rulesList.push(JSON.parse(option.commands))
    },
  }
}
</script>

<style scoped>
.Json-list {
  border: 1px solid #eee;
  padding: 10px;
}

.Json-list-line {
  display: flex;
  align-items: center;
}

.w-150 {
  width: 150px;
}

.ml-10 {
  margin-left: 10px;
}

.mr-10 {
  margin-right: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.cornerComment-in {
  width: 650px;
  height: 58%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.Json-small-list {
  background: #eee;
  padding: 10px;
  margin-top: 10px;
}
</style>
